document.addEventListener("DOMContentLoaded", (event) => {
  console.log("Document is ready");

  const thumbnailsContainer = document.querySelector(".product-thumbnails");
  const mainImage = document.querySelector(".main-image img");
  const productName = document.querySelector(".product-info h2");
  const originalPriceElement = document.querySelector(".original-price");
  const discountPriceElement = document.querySelector(".discount-price");
  const discountBadgeElement = document.querySelector(".discount-badge");
  const productThumbnails = [
    ["Character.jpg", "Character.Ai", ["1-1.jpg", "1-2.jpg", "1-3.jpg", "1-4.jpg"], 79, 66, "-20%"],
    [
      "ChatGPT-product.jpg",
      "ChatGPT",
      ["ChatGPT1.png", "ChatGPT2.png", "ChatGPT3.png", "ChatGPT4.png"],
      89,
      66,
      "-20%",
    ],
    // 可以在此处添加更多产品
  ];
  let currentIndex = 0;

  const updateProductInfo = (index) => {
    const [mainImgSrc, name, thumbnails, originalPrice, discountPrice, discountBadge] = productThumbnails[index];
    mainImage.src = mainImgSrc;
    productName.textContent = name;
    originalPriceElement.textContent = `Original Price ${originalPrice} DMD`;
    discountPriceElement.textContent = `Discount Price ${discountPrice} DMD`;
    discountBadgeElement.textContent = discountBadge;
    thumbnailsContainer.innerHTML = ""; // 清空现有缩略图
    thumbnails.forEach((src) => {
      const thumbnailDiv = document.createElement("div");
      const thumbnailImg = document.createElement("img");
      thumbnailImg.src = src;
      thumbnailDiv.appendChild(thumbnailImg);
      thumbnailsContainer.appendChild(thumbnailDiv);
    });
  };

  document.querySelector(".nav-button.left").addEventListener("click", () => {
    console.log("Left button clicked");
    currentIndex = (currentIndex - 1 + productThumbnails.length) % productThumbnails.length;
    updateProductInfo(currentIndex);
  });

  document.querySelector(".nav-button.right").addEventListener("click", () => {
    console.log("Right button clicked");
    currentIndex = (currentIndex + 1) % productThumbnails.length;
    updateProductInfo(currentIndex);
  });

  updateProductInfo(currentIndex); // 初次更新
});
